﻿
<title>组织架构</title>
<style>
    a {
        text-decoration: none;
        color: #fff;
        font-size: 12px;
    }

    .jOrgChart .node {
        width: 120px;
        height: 50px;
        line-height: 50px;
        border-radius: 4px;
        margin: 0 8px;
    }
</style>
<meta charset="UTF-8">
<div class="page-container" id="admui-pageContent">
    <div class="page animation-fade page-forms">
        <div class="page-header">
            <h1 class="page-title">公司组织架构</h1>
        </div>
        <div class="page-content">
            <div class="panel">
                <div class="panel-body container-fluid">
                    <div class="row row-lg">
                        <div class="col-md-12">
                            <div class="example-wrap">
                                <div class="example" style="align-items: center;display: flex;justify-content: center;">
                                    <div class="row" style="overflow-x:scroll;">
                                        <div id='jOrgChart' style="margin-top:20px; text-align:center;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>





<script src="~/admui-13945148017-1592211513218/public/vendor/jquery/jquery.min.js"></script>
<script src="~/GoTRI/jquery.jOrgChart.js"></script>
<link href="~/GoTRI/jquery.jOrgChart.css?v=1" rel="stylesheet" />
<script type='text/javascript'>
    $(document).ready(function () {
        $("#SpanGongSi").click();
    })
    $(function () {
        //数据返回
        $.ajax({
            url: "../GongSi/GetGongSiZuZhiJiaGou",
            type: 'post',
            dataType: 'text',
            data: {},
            success: function (result) {
                var json = $.parseJSON(result);
                console.log(json);
                var showlist = $("<ul id='org' style='display:none'></ul>");
                showall(json.data, showlist);
                $("#jOrgChart").append(showlist);
                $("#org").jOrgChart({
                    chartElement: '#jOrgChart',//指定在某个dom生成jorgchart
                    dragAndDrop: false //设置是否可拖动
                });

            }
        });
    });

    function showall(menu_list, parent) {
        $.each(menu_list, function (index, val) {
            if (val.childrens.length > 0) {

                var li = $("<li></li>");
                li.append("<a href='javascript:void(0)' onclick=getOrgId(" + val.id + ");>" + val.name + "</a>").append("<ul></ul>").appendTo(parent);
                //递归显示
                showall(val.childrens, $(li).children().eq(1));
            } else {
                $("<li></li>").append("<a href='javascript:void(0)' onclick=getOrgId(" + val.id + ");>" + val.name + "</a>").appendTo(parent);
            }
        });

    }

</script>
